<script setup lang="ts">
import filters from '@/utils/filters';
import OrderRequest from '@/request/orderRequest';
import useToast from '@/hooks/useToast';

const props = defineProps<{ data: IOrderDetailInfo }>();
const orderTrackingShow = ref<boolean>(false);
const infoList = ref<{ text: string; desc: string }[]>([]);
const { showToast } = useToast();

// 请求订单跟踪数据
const fetchObtainOrderTracking = () => {
  OrderRequest.GetOrderTracking({ orderId: props.data.orderId, hasLoading: true }).then((res) => {
    if (res.status === 0) {
      infoList.value = res.data.map((item) => {
        return { text: item.operation, desc: item.operationDate };
      });

      if (infoList.value.length > 0) {
        orderTrackingShow.value = true;
      } else {
        showToast('暂无订单跟踪数据');
      }
    }
  });
};
</script>

<template>
  <view class="mb-12px">
    <van-cell-group inset>
      <van-cell @click="fetchObtainOrderTracking" clickable use-label-slot :border="false">
        <view slot="title" class="flex items-center">
          <view class="font-size-4 font-bold"> 订单{{ props.data.orderState === 13 ? '产品' : '' }}{{ props.data.errorState === 3 ? '取消申请中' : filters.orderStateFillter(props.data.orderState!, props.data.timingState!) }}</view>
          <view>
            <i class="i-bx:caret-right font-size-5"></i>
          </view>
        </view>
      </van-cell>
    </van-cell-group>
    <van-popup position="bottom" custom-style="height: 40%;" round :show="orderTrackingShow" @close="orderTrackingShow = false">
      <view class="text-align-center py-2 box-border font-bold">订 单 跟 踪</view>
      <van-steps :steps="infoList" :active="infoList.length - 1" direction="vertical" active-color="#ffc300" />
    </van-popup>
  </view>
</template>
